import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createModelSchema,
  createDecoratorStyleSchema,
  getDefalutDecoratorProps,
  createComponentLayout,
  createControllerSchema
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { EformStaticList as LocaleEformStaticList } from './locale';
import SelectGroup from './webServer/components/SelectGroup';
import StaticData from './components/StaticData';
import { getPlatform } from '@inbiz/utils';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */
export const defaultProps = {
  selectMode: false,
  showMode: 1,
  placeholder: 'EformStaticListView.placeholder',
  defaultValue: '',
  label: {
    status: true,
    value: '静态列表',
  },
  autoLoading: true,
  labelDirection: 'left',
  layoutMode: 'transverse',
  placeholder1: '点击选择',
  selectWindowHeight: 50,
  value: '',
  disabledOptions: [],
  hideDisabledOptions: false,
  staticDataList: {
    groupId: '',
    list: [],
  },
};

export const EformStaticList = createInbizSchema({
  attribute: {
    ...createBaseSchema({
      // labelDirection: {
      //   type: 'string',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Radio.Group',
      //   enum: ['left', 'top'],
      //   platform: 'wap',
      // },
      selectMode: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      showMode: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group',
        enum: [1, 2],
      },
      selectHeight: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-reactions': {
          dependencies: ['.showMode'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== 2}}',
            },
          },
        },
        'x-component-props': {
          addonAfter: 'px',
        },
        platform: 'web',
      },
      placeholder: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'MultilingualInput',
        'x-reactions': {
          dependencies: ['.showMode'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== 2}}',
            },
          },
        },
      },
      layoutMode: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group',
        enum: ['transverse', 'portrait'],
        'x-reactions': {
          dependencies: ['.showMode'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== 1}}',
            },
          },
        },
        platform: 'wap',
      },
      selectWindowHeight: {
        type: 'Number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-reactions': {
          dependencies: ['.showMode'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== 2}}',
            },
          },
        },
        'x-component-props': {
          addonAfter: '%',
        },
        platform: 'wap',
      },
      dataType: {
        type: 'string',
        enum: ['system', 'custom'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        default: 'system',
      },
      dataGroupId: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': SelectGroup,
        'x-reactions': {
          dependencies: ['.dataType'],
          when: "{{$deps[0] === 'system'}}",
          fulfill: {
            schema: {
              'x-component': SelectGroup,
              'x-decorator-props': {
                label: '数据字典',
                tooltip:
                  "{{setTimeout(function (){ $self.decoratorProps.tooltip = '配置数据字典：应用>基础配置>开发者中心>数据字典';}, 0)}}",
              },
              'x-value': '',
            },
          },
          otherwise: {
            schema: {
              'x-component': 'ApiQuery',
              'x-component-props': {
                isDatasource: false,
                resultKeys: ['Rows'],
                isPrimaryKey: true,
              },
              'x-decorator-props': {
                label: '配置',
                tooltip: "{{setTimeout(function (){ $self.decoratorProps.tooltip = '';}, 0)}}",
              },
              'x-value': '',
            },
          },
        },
      },
      showField: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-reactions': {
          dependencies: ['.dataType'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] == "system"}}',
            },
          },
        },
      },
      staticDataList: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {},
        'x-hidden': true,
        'x-reactions': {
          dependencies: ['.dataType'],
          fulfill: {
            schema: {
              'x-value': '',
            },
          },
        },
      },
      defaultValue: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': StaticData,
        'x-component-props': {
          dataList: [],
        },
        'x-reactions': [
          {
            dependencies: ['.staticDataList', '.selectMode', '.dataType'],
            when: "{{$deps[2] === 'system'}}",
            fulfill: {
              schema: {
                'x-component-props.groupId': '{{$deps[0]}}',
                'x-component-props.mode': '{{$deps[1]?"multiple":"undefined"}}',
                'x-component': StaticData,
              },
            },
            otherwise: {
              schema: {
                'x-component': 'Input',
                'x-component-props': {},
              },
            },
          },
          {
            dependencies: ['.dataType'],
            fulfill: {
              schema: {
                'x-value': '',
              },
            },
          },
        ],
      },
      disabledOptions: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': StaticData,
        'x-component-props': {
          dataList: [],
          mode: 'multiple',
        },
        'x-reactions': [
          {
            dependencies: ['.staticDataList', '.selectMode', '.dataType'],
            fulfill: {
              schema: {
                'x-component-props.groupId': '{{$deps[0]}}',
                'x-component-props.mode': '{{$deps[1]?"multiple":"custom"}}',
                'x-hidden': '{{$deps[2] != "system"}}',
              },
            },
          },
          {
            dependencies: ['.dataType'],
            fulfill: {
              schema: {
                'x-value': '',
              },
            },
          },
        ],
      },
      hideDisabledOptions: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-reactions': {
          dependencies: ['.dataType'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] != "system"}}',
            },
          },
        },
      },
      autoLoading: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
    }),
    ...createValidatorSchema(false),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createModelSchema({
      childModelConfig: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      storageConfig: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': 'StorageConfig',
        'x-component-props': {
          type: 'list',
        },
        'x-reactions': {
          dependencies: ['.childModelConfig'],
          fulfill: {
            state: {
              visible: "{{$deps == 'true'}}",
            },
          },
        },
      },
    }),
  },
  controller:createControllerSchema({
    events: [{
      name: "onClick",
      label: "点击",
      platform: 'web'
    },
    {
      name: "onChange",
      label: "变更"
    },
    {
      name: "onSelect",
      label: "选中",
      platform: 'wap'
    },
    {
      name: "onLoad",
      label: "加载"
    },
    {
      name: "onSuccess",
      label: "成功"
    },
    {
      name: "onError",
      label: "报错"
    }, {
      name: "onDropdownVisibleChange",
      label: "下拉框变更",
      platform: 'web'
    }, {
      name: 'onRequest',
      label: '自定义请求',
      isConfigEvent: true,
    },{
      name: 'onData',
      label: '格式化数据',
      isConfigEvent: true,
    }, {
      name: 'onParamFormat',
      label: '格式化参数',
      isConfigEvent: true,
    }]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'EformStaticList',
  selector: (node: any) => node.props['x-component'] === 'EformStaticList',
  designerLocales: LocaleEformStaticList,
  designerProps: {
    propsSchema: EformStaticList,
  },
});

export const Resource = createResource({
  icon: 'StaticList',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'EformStaticList.title',
          status: true,
        },
        'x-decorator': 'FormItem',
        'x-component': 'EformStaticList',
        'x-component-props': defaultProps,
        'x-decorator-props': getDefalutDecoratorProps(getPlatform()),
      },
    },
  ],
});

export interface IStaticListSchema {
  editData: any;
  config: {
    title: {
      status: boolean;
      value: string;
    };
    labelDirection: 'left' | 'top';
    defaultValue: string | string[];
    selectMode: boolean;
    showMode: 1 | 2;
    layoutMode: 'transverse' | 'portrait';
    placeholder: string;
    selectWindowHeight: number;
    autoLoading: boolean;
    value: string | string[];
  };
}
